<template>
  <div class="column full-height" style="flex-wrap: nowrap">
    <div style="height: 60px"></div>
    <user-small-panel></user-small-panel>

    <div style="height: 60px"></div>

    <q-list bordered>
      <q-item clickable v-ripple to="/main">
        <q-item-section avatar>
          <q-avatar color="primary" text-color="white" icon="home"/>
        </q-item-section>
        <q-item-section>我的空间</q-item-section>
      </q-item>

      <q-separator/>

      <q-item clickable v-ripple
              :to="{name:'AppIndex',params:{index:'search'},query:{keywords:''}}">
        <q-item-section avatar>
          <q-avatar color="teal" text-color="white" icon="thumb_up"/>
        </q-item-section>
        <q-item-section>应用推荐</q-item-section>
      </q-item>

      <!--      <q-item clickable v-ripple-->
      <!--              :to="{name:'AppIndex',params:{index:'search'},query:{keywords:'工具'}}">-->
      <!--        <q-item-section avatar>-->
      <!--          <q-avatar color="purple" text-color="white" icon="construction"/>-->
      <!--        </q-item-section>-->
      <!--        <q-item-section>实用工具</q-item-section>-->
      <!--      </q-item>-->

      <!--      <q-item clickable v-ripple-->
      <!--              :to="{name:'AppIndex',params:{index:'search'},query:{keywords:'提效'}}">-->
      <!--        <q-item-section avatar>-->
      <!--          <q-avatar color="green" text-color="white" icon="show_chart"/>-->
      <!--        </q-item-section>-->
      <!--        <q-item-section>工作提效</q-item-section>-->
      <!--      </q-item>-->

      <q-separator/>

      <q-item clickable v-ripple
              :to="{name:'Topic'}">
        <q-item-section avatar>
          <q-avatar color="red" text-color="white" icon="topic"/>
        </q-item-section>
        <q-item-section>热门专题</q-item-section>
      </q-item>

      <q-separator/>

      <q-item clickable v-ripple :to="{name:'AppIndex',params:{index:'my-like'}}">
        <q-item-section avatar>
          <q-avatar color="secondary" text-color="white" icon="local_florist"/>
        </q-item-section>
        <q-item-section>我的点赞</q-item-section>
      </q-item>

      <q-item clickable v-ripple :to="{name:'AppIndex',params:{index:'my-collection'}}">
        <q-item-section avatar>
          <q-avatar color="deep-orange" text-color="white" icon="local_activity"/>
        </q-item-section>
        <q-item-section>我的收藏</q-item-section>
      </q-item>

    </q-list>

    <q-space class="col-1"></q-space>

    <q-list bordered>
      <q-item clickable v-ripple>
        <q-item-section avatar>
          <q-avatar color="amber" text-color="white" icon="bug_report"/>
        </q-item-section>
        <q-item-section>测试版Beta0.1.1</q-item-section>
        <q-popup-proxy class="q-pa-none">
          <!-- <q-banner >
            <template v-slot:avatar>
              <q-icon name="tips_and_updates" size="sm" color="primary" />
            </template>
            <div class="q-pa-sm">当前还在开发阶段，不过工作空间等功能已初步完成，可以抢先体验一下咯。</div>
            <div class="q-pa-none"></div>
          </q-banner> -->
          <q-banner class="bg-primary text-white">
            逐步完善中，欢迎吐槽。
            <template v-slot:action>
              <q-btn flat color="white" label="查看版本日志"/>
              <!-- <q-btn flat color="white" label="取消" /> -->
            </template>
          </q-banner>
        </q-popup-proxy>
      </q-item>
    </q-list>
  </div>
</template>

<script lang="ts">
import UserSmallPanel from 'components/UserSmallPanel.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'UserPanel',
  components: {
    UserSmallPanel
  }
})
</script>
